<template>
    <div class="myaddr">
        <header>
            <router-link to="/mobile/usersetting"><</router-link>
            <h3>编辑收货地址 <i class="el-icon-location-outline"></i></h3>
            <button>删除</button>
        </header>
        <div class="addr">
            <aside>地址信息</aside>
            <div>
                收件人 <input type="text" v-model="user.name"/>
            </div>
            <div>
                手机号 <input type="tel" v-model="user.phone"/>
            </div>
            <div class="tar">
                <span>详细信息</span>
                <textarea v-model="user.addr"></textarea>
            </div>
        </div>
        <div class="footer">
            <button @click="updateShip()">保存</button>
        </div>
    </div>
</template>

<script>
export default {
    name:'MyAddr',
    data(){
        return{
            user:{}
        }
    },
    methods:{
        updateShip(){
			let k={
				nickname:this.user.name,
				phone:this.user.phone,
				addr:this.user.addr
			}
            this.$postkv("/api/user/updateShip",k).then((resp)=>{
                console.log(resp.data);
                this.$message({
                    message: '地址信息更新成功!',
                    type:'success'
                })
            })
        }
    },
    mounted(){
        this.$get("/api/user/shipInfo").then((resp)=>{
            this.user =resp.data.data;
            console.log(resp.data.data);
        })
    }
}
</script>

<style scoped>
.myaddr{
	width: 100%;
	background-color: #efefef;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.myaddr header{
	width: 96%;
	line-height: 3rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.myaddr header a {
	font-size: 1.8rem;
	line-height: 3rem;
	color: #000000;
}
.myaddr header button{
	color: #fa5300;
	border: none;
	background-color: #eeeeee;
	font-size: 16px;
}
.myaddr .addr{
	width: 98%;
	margin: 0 auto;
	margin-top: 1rem;
	align-items: center;
	justify-content: center;
	background-color: #f9f9f9;
	border-radius: 8px;
}
.myaddr .addr aside{
	height: 3rem;
	line-height: 3rem;
	font-weight: 600;
	margin-left: 0.5rem;
}
.myaddr .addr div{
	width: 96%;
	margin: 0 auto;
}
.myaddr .addr input{
	width: 72%;
	line-height: 2rem;
	margin: 10px;
	border-radius: 8px;
	border: none;
	margin-left: 2rem;
	text-indent: 0.5em;
	background-color: #eaeaea;
}
.myaddr .addr .tar{
	display: flex;
	align-items: center;
}
.myaddr .addr .tar span{
	width: 5rem;
}
.myaddr .addr .tar textarea{
	width: 72%;
	height: 4.5rem;
	margin: 5px;
	border: none;
	border-radius: 8px;
	text-indent: 0.5em;
	background-color: #eaeaea;
	caret-color: #fa5300;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
	resize: none; /* 禁止拖动 */
}
.myaddr .footer{
	width: 100%;
	height: 4rem;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 粘性定位 */
	position: fixed;
	bottom: 0.2%;
	border-top: 1px solid #bababa;
	border-bottom: 1px solid #bababa;
}
.myaddr .footer button{
	width: 22rem;
	height: 3rem;
	color: white;
	font-size: 18px;
	background-color: #fe5d28;
	border: none;
	border-radius: 20px;
	margin-top: 0.25rem;
}
</style>
